<template>
  <div class="store-container">
    <div class="store-code" @click="preview">
      <a-avatar
        :src="storeInfo.qrcode_img"
        alt="门店二维码"
        :size="55"
        shape="square"
        icon="bank"
      />
    </div>
    <div class="store-info">
      <div class="store-title">
        <h3 style="font-weight:bold;height:24px">
          {{ storeInfo.name }}
          <span style="margin-left:20px;" v-if="storeInfo.pid > 0">服务网点</span>
        </h3>
      </div>
      <div class="store-content">地址：{{ storeInfo.address }}</div>
      <div class="store-content" style="margin-top: 10px">系统到期时间：{{ storeInfo.upkeep_time }}</div>
    </div>
    <div class="store-info">
      <p class="store-content">门店电话：{{ storeInfo.mobile }}</p>
      <div class="store-content">
        乐管家推荐百分比：{{
          (storeInfo.le_ratio && storeInfo.le_ratio + '%') || `未设置，默认为：${storeInfo.ratio}%`
        }}
      </div>
    </div>
    <div class="store-info">
      <div class="store-content">
        乐管家收衣百分比：{{
          (storeInfo.tuan_ratio > 0 && storeInfo.tuan_ratio + '%') || `未设置，默认为：${storeInfo.tuan_default_ratio}%`
        }}
      </div>
      <div class="store-content">
        状态：
        <a-badge status="success" text="正在营业" v-if="storeInfo.status === 1" />
        <a-badge status="error" text="未营业" v-else />
      </div>
    </div>
    <pre-modal ref="preModal"></pre-modal>

  </div>
</template>

<script>
import PreModal from '@/components/pre-modal'
export default {
  components: {
    PreModal
  },
  props: {
    storeInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    preview () {
      this.$refs.preModal.preview(this.storeInfo.qrcode_img)
    }
  }
}
</script>

<style lang="less" scoped>
.store-container {
  display: flex;
  // color: #000001;
  .store-code {
    width: 50px;
    height: 50px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .store-info {
    margin-left: 20px;
    // width: 350px;
	width: 225px;
    .store-content {
      line-height: 1.5;
      min-height: 21px;
      &:first-child {
        margin-bottom: 0.8em;
      }
    }
    & + .store-info {
      margin-left: 30px;
    }
  }
}
</style>
